Homepage :: Linguaggi :: Dhtml :: Articoli :: Leggi # 5


Mantenere fisso un layer nonostante lo scroll

Autore: Luca Ruggiero

Comparso su HTML.it il 13 Novembre 2002 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

~ lukeonweb.net ~ Guardate in basso a destra sul vostro monitor... no, non l'orologio, lo vedo che sono le 19:23 !!! un po più in alto... leggete una scritta rossa in corsivo? bene... provate, prima di continuare a leggere, a scrollare un po la pagina con la barra di scorrimento... vedete ancora la scritta?

Se state utilizzando Microsoft Internet Explorer o Netscape Navigator immagino di si!!!

Perdonatemi per questo "mistero" iniziale, ma sono ORE che sto pensando ad una descrizione per questo effetto Dhtml... evidentemente la giornata non è favorevole!!!

Bene, prendiamo due piccioni con una fava! impareremo ad utilizzare una serie di utili comandi che il Javascript utilizza per la realizzazione di effetti in Dhtml, e lo faremo realizzando questo piacevole, e perchè no, in molti casi anche utile effetto.

Creiamo un file Javascript e chiamiamolo No_Scroll_Layer.js e richiamiamolo su ogni pagina in cui vogliamo ottenere l'effetto con l'apposito comando di riferimento ad un file esterno: 

<script language="javascript1.2" src="No_Scroll_Layer.js"></script>

Nelle pagine posizioneremo un layer, che si tratti di un <div> o di uno <span> non è importante, consiglio di utilizzare il secondo per evitare problemi di ritorno a capo che potrebbero risultare nonostante il Css che gli applicheremo che ne imposta, tra le altre cose il posizionamento assoluto, ecco il codice 

<span id="TextScroll" style="position: Absolute; left: 0px; top: 0px; visibility: Hidden;">
   MA CHE CARINO CHE E' QUESTO EFFETTO :-)
</span>

Nel layer potete inserire quello che vi pare, ovviamente compatibilmente con gli elementi e la grafica della pagina, onde evitare sovrapposizioni confusionarie e non indicate, potreste ad esempio inserirvi un menu discreto e non troppo pesante, una piccola immagine, un logo, o qualsiasi altra cosa vi piaccia.

Esaminiamo il layer: gli abbiamo assegnato un identificativo univoco di tipo id per raggiungere il layer in fase di realizzazione dello script, una serie di stilizzazioni Css quali il posizionamento assoluto, come già detto, la distanza da destra e da sinistra e lo impostiamo inizialmente nascosto finchè lo script non verrà eseguito per intero sul client, onde evitare problemi di lentezza di caricamento o incompatibilità con browser diversi da quelli citati all'inizio dell'articolo.

Non ci resta che dare un'occhiata di carattere generale allo script nella sua integrità, poi con calma lo spezzetteremo e lo esamineremo nelle sue parti fondamentali, ci armeremo quindi di santa pazienza e gli faremo un'accurata autopsia :-)

Ecco il codice dello script: 

var larghezza = "";
var altezza = "";
    function Inizializza() {
       if (document.all) {
           larghezza = TextScroll.offsetWidth;
           altezza = TextScroll.offsetHeight;
           setInterval("TextScroll_IE()", 1);
           TextScroll.style.visibility = "Visible";
       }
       else if (document.layers) {
           larghezza = document.TextScroll.document.width;
           altezza = document.TextScroll.document.height;
           setInterval("TextScroll_NN()", 1);
           document.TextScroll.visibility = "Show";
       }
    }
    function TextScroll_IE() {
       TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
       TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
    }
    function TextScroll_NN() {
       document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
       document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
    }
    window.onload = Inizializza;

La sua struttura è molto semplice, in larga massima potremmo dividerlo in quattro fasi, la prima in cui dichiariamo le variabili relative all'altezza ed alla larghezza e le impostiamo inizialmente vuote 

var larghezza = "";
var altezza = "";

La prima delle tre funzioni proposte, come il nome stesso lascia ad intendere (Inizializza()), si occupa di inizializzare lo script, nel senso che rimanda ad una delle due funzioni successive, una compatibile con Internet Explorer ed un'altra con Navigator, mediante le condizioni 

if (document.all) { ...ed 
if (document.layers) { ...

Esaminiamole entrambe, riporto gli spezzoni di detti codici corredati di opportuni commenti: 

// Verifica che venga richiamata la funzione per Internet Explorer
if (document.all) {
    // La proprietà offsetWidth imposta la larghezza "fuori campo"
    larghezza = TextScroll.offsetWidth;
    // La proprietà offsetWidth imposta l'altezza "fuori campo"
    altezza = TextScroll.offsetHeight;
    // Dopo un millesimo di secondo lasciamo partire la funzione per IE che vedermo tra breve
    setInterval("TextScroll_IE()", 1);
    // Rendiamo visibile il layer che ci interessa
    TextScroll.style.visibility = "Visible";
}

La struttura di questa funzione di controllo per Navigator è logicamente strutturata in maniera analoga a quella per Explorer, cambia solo in maniera minima la forma sintattica con cui comunicargli i controlli da effettuare, riporto le differenze tra le due forme in maniera schematica di seguito:

Microsoft Internet Explorer Netscape Navigator 

TextScroll.offsetWidth document.TextScroll.document.width 
TextScroll.offsetHeight document.TextScroll.document.height 
TextScroll.style.visibility = "Visible"; TextScroll.style.visibility = "Show"; 

E' possibile notare che le differenze sono notevoli nella forma nelle prime due righe della tabella, mentre è minima quella sullo visibilità dello style dell'elemento layer, ovvero Visible (IE) e Show (NN).

Nella temporizzazione invece si fa riferimento alle funzioni compatibili con i rispettivi browser, TextScroll_IE e TextScroll_NN.

Passiamo alle funzioni vere e proprie, quelle i cui nomi sono stati appena citati, iniziamo con quella per Internet Explorer: 

function TextScroll_IE() {
   // Imposta la distanza dal bordo destro, distanziando il layer di 10 pixel
   TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
   // Imposta la distanza dal bordo inferiore, distanziando il layer di 10 pixel
   TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
}

Le medesime operazioni svolge la funzione ottimizzata per Navigator, propongo il codice senza commenti, valgono quelli della precedente: 

function TextScroll_NN() {
   document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
   document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}

Richiamiamo il tutto con l'evento onload: 

window.onload = Inizializza;

Et volià!!! 

--------------------------------------------------------------------------------
 
A cura di Luca Ruggiero, Napoli 2001/2003 - Ci sono 10 utenti online, il massimo numero registrato è 632 - Hosted by AspCode.it